import React, {Component} from 'react';
import Detail from "./Detail/Detail";
import {Link, Route} from "react-router-dom";

class Message extends Component {
    state = {
        messageArr: [
            {id: '01', title: '消息1'},
            {id: '02', title: '消息2'},
            {id: '03', title: '消息3'},
        ]
    }

    replaceShow = (id, title) => {
        //replace跳转+携带params参数
        // this.props.history.replace(`/home/message/detail/${id}/${title}`)
        //replace跳转+携带search参数
        // this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)
        //replace跳转+携带state参数
        this.props.history.replace(`/home/message/detail`, {id, title})
    }

    pushShow = (id, title) => {
        console.log(this.props)
        //push跳转+携带params参数
        this.props.history.push(`/home/message/detail/${id}/${title}`)
        //push跳转+携带search参数
        this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)
        //push跳转+携带state参数
        this.props.history.push(`/home/message/detail`, {id, title})
    }

    back = () => {
        this.props.history.goBack();
    }
    forward = () => {
        this.props.history.goForward();
    }

    go = () => {
        this.props.history.go(-2);
    }

    render() {
        const {messageArr} = this.state;
        console.log('Message', this.props)
        return (
            <ul>
                {
                    messageArr.map((msgObj) => {
                        return (
                            <li key={msgObj.id}>
                                {/*向路由组件传递params参数*/}
                                {/*<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>*/}
                                {/*向路由组件传递search参数*/}
                                {/*<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>*/}
                                {/*向路由组件传递state参数*/}
                                <Link replace to={{pathname: '/home/message/detail', state: {...msgObj}}}>{msgObj.title}</Link>
                                <button onClick={() => this.pushShow(msgObj.id, msgObj.title)}>push</button>
                                <button onClick={() => this.replaceShow(msgObj.id, msgObj.title)}>replace</button>
                            </li>
                        )
                    })
                }
                <hr/>
                {/*声明接收params参数*/}
                {/*<Route path="/home/message/detail/:id/:title" component={Detail}/>*/}
                {/*search参数无需声明接收，正常注册路由即可*/}
                {/*<Route path="/home/message/detail" component={Detail}/>*/}
                {/*state参数无需声明接收，正常注册路由即可*/}
                <Route path="/home/message/detail" component={Detail}/>

                <button onClick={this.back}>回退</button>
                <button onClick={this.forward}>前进</button>
                <button onClick={this.go}>go</button>
            </ul>
        );
    }
}

export default Message;